import 'package:flutter/material.dart';

void main() => runApp(MyApp());
/// 图片组件
class MyApp extends StatelessWidget {
  final img1 = 'assets/33.jpg';
  final img2 = 'assets/44.jpeg';
  final img3 =
      'https://pic1.zhimg.com/70/v2-f9235de0594a190a46e42d3c0eebbfaf_1440w.avis?source=172ae18b&biz_tag=Post';
  final img4 =
      'https://k-static.xsfaya.com/uploads/allimg/230103/1H92KN4-0.jpg';

  Widget _buildBody() {
    return SingleChildScrollView(
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Stack(
              children: <Widget>[
                Positioned.fill(
                  child: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Color(0xFF0D47A1),
                          Color(0xFF1976D2),
                          Color(0xFF42A5F5),
                        ],
                      ),
                    ),
                  ),
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.all(16.0),
                    textStyle: const TextStyle(fontSize: 20),
                  ),
                  onPressed: () {},
                  child: const Text('Gradient'),
                ),
              ],
            ),
          ),

          Text('静态资源'),
          Image.asset(img2),

          Text('网络读取'),
          Image.network(
            'http://img1.baidu.com/it/u=2310073667,2268706659&fm=253&app=138&f=JPEG?w=800&h=1422',
          ),

          Text('NetworkImage'),
          Image(
            image: NetworkImage(img4),
            width: 400,
          ),

          Text('占位图'),
          FadeInImage(
            placeholder: AssetImage(img1),
            image: NetworkImage(
                'https://img2.baidu.com/it/u=3353245931,3369234890&fm=253&fmt=auto&app=138&f=JPEG?w=486&h=866'),
            fadeInCurve: Curves.bounceIn,
            width: 400,
          ),

          Text('原型头像'),
          CircleAvatar(
            child: Text('爸爸'),
            backgroundImage: AssetImage(img1),
            backgroundColor: Colors.brown,
            radius: 50.0,
          ),

          Text('图标'), // 要用PNG图片，不透明的地方上色
          ImageIcon(
            AssetImage(img2),
            size: 250,
            color: Colors.yellow,
          ),

          Text('圆角'),
          ClipRect(
            child: Image.asset('assets/renne.gif'),
          ),

          Text('圆角矩形框'),
          Container(
            // 类似HTML中的DIV
            width: 300,
            height: 180,
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: NetworkImage(
                    'https://img2.baidu.com/it/u=1193821420,3890356184&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1319'),
                fit: BoxFit.cover,
              ),
            ),
          ),

          Text('椭圆形'),
          ClipOval(
            child: Image.network(
              'https://img2.baidu.com/it/u=3998137866,1169272175&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
              scale: 5,
              height: 100,
            ),
          ),

          Text('混色'),
          Image.network(
            'http://img1.baidu.com/it/u=4243502887,456134124&fm=253&app=138&f=JPEG?w=800&h=1422',
            color: Colors.lightBlueAccent,
            colorBlendMode: BlendMode.dstATop,
          ),

          Text('裁剪'),
          Image.network(
            'https://img0.baidu.com/it/u=836051723,3606105171&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1201',
            width: 400,
            height: 140,
            fit: BoxFit.cover,
          ),
          Image.network(
            'http://img2.baidu.com/it/u=204610336,776160186&fm=253&app=138&f=JPEG?w=760&h=1140',
            width: 400,
            height: 100,
            fit: BoxFit.fitWidth,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('图片组件'),
        ),
        drawer: Center(
          child: Column(
            children: [
              SizedBox(
                height: 80,
              ),
              Text(
                '首页',
                style: TextStyle(
                  fontSize: 24,
                ),
              )
            ],
          ),
        ),
        body: _buildBody(),
      ),
    );
  }
}
